<template>
  <div class="content-box">
    <!--<div class="address">
      <div>
        <p>您当前所在位置</p>
        <router-link to="/" class="link">售后状态记录-团体</router-link>
      </div>
    </div>-->
    <div class="roder-details">
      <div class="info">
        <h3 class="title">售后记录跟踪</h3>
        <h4 class="title10">{{detail.createTime}}</h4>
        <div class="text11">
          <!--<p>申请售后：</p>-->
          <div>
            <p>售后类型：{{this.detail.afterSalesString}}</p>
            <p>售后原因：{{detail.reason}}</p>
            <p>售后产品人员列表</p>


            <div class="table-css" style="width: 800px;">
              <a-table class="table1" lign="center"
                       rowKey="id"
                       :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                       :columns="column2"
                       :pagination="ipagination1"
                       @change="handleTableChange2"
                       :data-source="data1">
                <!-- <a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a> -->
                <span slot="k7" slot-scope="text, record">
                  <a
                    @click="$router.push({path:'/orderCenter/afterNumbers',query:{id:record.id,afterCode:$route.query.after}})">查看返修参数</a>&nbsp;
                </span>
              </a-table>
            </div>
          </div>
        </div>

<!--        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="备注">
              <a-textarea
                v-model="remark"
                placeholder="请输入备注"
                :auto-size="{ minRows: 3, maxRows: 10 }"
              />
            </a-form-item>
          </a-col>
        </a-row>-->

<!--        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item>
              <a-button @click="afterAgreeFunc(1)" type="primary">通过审核</a-button>
              <a-button @click="afterAgreeFunc(0)" type="primary" style="margin-left: 10px">拒绝</a-button>
            </a-form-item>
          </a-col>
        </a-row>-->

        <!--被拒绝的列表-->
        <h3 class="title">已拒绝</h3>
        <div v-for="(item,key) in RefustProductList" :key="item.id">
          <h4 class="title10">{{item.createTime}}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <!--<p>售后状态：已拒绝</p>-->
              <p>备注信息：{{item.reason}}</p>

              <div class="table-css" style="width: 800px;">
                <a-table class="table1" lign="center"
                         :pagination="false"
                         :columns="column1" :data-source=item.afterProductList>
                </a-table>
              </div>
            </div>
          </div>
        </div>

        <!--已同意-->
        <h3 class="title">已同意</h3>
        <div v-for="(item,key) in AgreeProductList" :key="item.id">
          <h4 class="title10">{{item.createTime}}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <!--<p>售后状态：已同意</p>-->
              <p>备注信息：{{item.reason}}</p>

              <div class="table-css" style="width: 800px;">
                <a-table class="table1" lign="center"
                         :pagination="false"
                         :columns="column1" :data-source=item.afterProductList>
                </a-table>
              </div>
            </div>
          </div>
        </div>

        <!--平台发货-->
        <h3 class="title">平台收货</h3>
        <div v-for="(item,key) in ReceivingList" :key="item.id">
          <h4 class="title10">{{item.createTime}}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <p>售后状态：准备收货</p>
              <p>运单号：{{item.thirdSn}}</p>
              <p>备注信息：{{item.remark}}</p>
            </div>
          </div>

<!--          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item label="备注" v-show="item.isGet==0">
                <a-textarea
                  v-model="item.remark2"
                  placeholder="请输入备注"
                  :auto-size="{ minRows: 3, maxRows: 10 }"
                />
              </a-form-item>
            </a-col>
          </a-row>-->

<!--          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item v-show="item.isGet==0">
                <a-button @click="receiptsOrSubmitFunc(item.id,0,item.remark2)" type="primary">提交</a-button>
                <a-button @click="receiptsOrSubmitFunc(item.id,1,item.remark2)" type="primary"
                          style="margin-left: 10px">确认收货
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>-->

        </div>

        <!--产品已收-->
        <h3 class="title">产品已收</h3>
        <div class="table-css" style="width: 800px;">
          <a-table class="table1" lign="center"
                   rowKey="id"
                   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                   :pagination="false"
                   :data-source="productGetList"
                   :columns="Productget">
<!--            <span slot="k7" slot-scope="text, record">
              <a @click="getupdateIDfunc(record.id)">更新产品状态</a>&nbsp;
            </span>-->
          </a-table>
        </div>

        <!--更新产品状态的弹框-->
<!--        <a-modal
          title="更新产品状态"
          v-model:visible="visible"
          @ok="updateAfterProFunc"
        >
          <span>产品状态：</span>
          <a-select
            placeholder="请选择"
            v-model:value="ProductStatus"
            style="width: 120px"
            ref="select"
          >
            <a-select-option value="1">
              缝制
            </a-select-option>
            <a-select-option value="2">
              滚烫
            </a-select-option>
            <a-select-option value="3">
              入库
            </a-select-option>
          </a-select>

        </a-modal>-->

<!--        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <p style="height:60px"></p>
          </a-col>
        </a-row>-->

<!--        <h3 class="title">批次装箱</h3>
        &lt;!&ndash; 查询区域 &ndash;&gt;
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">

              <a-col :md="6" :sm="12">
                <a-form-item>
                  <a-input v-model="batchName" placeholder="请输入批次编号"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-button type="primary" @click="getBatchByCodeFunc">搜索</a-button>
              </a-col>

            </a-row>
          </a-form>
          <p>批次信息：{{BatchDetail.batchName}}</p>
          <span>部门：{{BatchDetail.departName}}</span>
          <span style="margin-left: 20px">收货地址：{{BatchDetail.address}}</span>-->

<!--          <div v-if="BatchDetail.batchName !='' && BatchDetail.batchName !=null ">
            <a-button style="display: block;margin-top:10px;margin-bottom: 10px" type="primary"
                      @click="$router.push({path:'/orderCenter/saveBox',query:{batch:BatchDetail.id,order:$route.query.orderSn}})">
              新增装箱单
            </a-button>
            <div class="table-css" style="width: 800px;">
              <a-table class="table1" lign="center"
                       rowKey="id"
                       :pagination="false"
                       :data-source="BatchDetail.batchPackingInfoList"
                       :columns="boxList">
            <span slot="k7" slot-scope="text, record">
              <a-popconfirm title="确定添加?" @confirm="() => addProductonBox(record.id)">
                    <a style="color:deepskyblue">添加产品</a>
                  </a-popconfirm>
            </span>
              </a-table>-->

<!--              <a-row :gutter="24">
                <a-col :md="6" :sm="12">
                  <a-form-item label="备注">
                    <a-textarea
                      v-model="packageRemark"
                      placeholder="请输入备注"
                      :auto-size="{ minRows: 3, maxRows: 10 }"
                    />
                  </a-form-item>
                </a-col>
              </a-row>-->

<!--              <a-row :gutter="24">
                <a-col :md="6" :sm="12">
                  <a-form-item>
                    <a-button @click="saveProInPPackageFunc" type="primary">保存</a-button>
                  </a-form-item>
                </a-col>
              </a-row>-->
            </div>
          </div>

          <h3 class="title" style="margin-top:20px">售后产品发货</h3>
          <a-table class="table1" lign="center"
                   :pagination="false"
                   :columns="column2" :data-source="outAfterProList">
                <span slot="k7" slot-scope="text, record">
                  <a @click="watchBatchFunc(record)">查看</a>&nbsp;
                </span>
          </a-table>

          <!--更新产品状态的弹框-->
          <a-modal
            title="查看批次信息"
            v-model:visible="visible2"
            @ok="closeModel"
          >
            <p>批次名称：{{ProPici}}</p>
            <p>装箱单名称：{{ProBoxName}}</p>
            <p>运单号：{{ProThreadSn}}</p>
          </a-modal>

          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <p style="height:60px"></p>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

  // 装箱单列表
  const boxList = [
    {
      dataIndex: 'k1',
      key: 'k1',
      title: '序号',
      width: 60,
      align: "center",
      customRender: function (t, r, index) {
        return parseInt(index) + 1;
      }
    },
    {
      title: '装箱名称',
      dataIndex: 'packingName',
    },
    {
      title: '装箱单编号',
      dataIndex: 'code',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      key: 'k7',
      dataIndex: 'k7',
      scopedSlots: {
        customRender: 'k7'
      },
    }
  ];

  // 售后产品人员列表 售后的小产品表
  const column2 = [{
    dataIndex: 'k1',
    key: 'k1',
    title: '序号',
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    }
  },
    {
      title: '员工部门',
      dataIndex: 'departName',
      key: 'k2',
    },
    {
      title: '员工姓名',
      dataIndex: 'customerName',
      key: 'k3',
    },
    {
      title: '员工编号',
      key: 'k4',
      dataIndex: 'customerCode'
    },
    {
      title: '产品',
      key: 'k5',
      dataIndex: 'productName'
    },
    {
      title: '售后类型',
      key: 'k6',
      dataIndex: 'afterSalesType',
      customRender: (afterSalesType) => {
        //字典值替换通用方法
        if (afterSalesType == 0)
          return "面料";
        else if (afterSalesType == 1)
          return "个订";
        else if (afterSalesType == 2)
          return "团订";
        else
          return "成衣"
      }

    },
    {
      title: '操作',
      key: 'k7',
      dataIndex: 'k7',
      scopedSlots: {
        customRender: 'k7'
      },
    }
  ];
  const column1 = [{
    dataIndex: 'k1',
    key: 'k1',
    title: '序号',
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    }
  },
    {
      title: '员工部门',
      dataIndex: 'departName',
      key: 'k2',
    },
    {
      title: '员工姓名',
      dataIndex: 'customerName',
      key: 'k3',
    },
    {
      title: '员工编号',
      key: 'k4',
      dataIndex: 'customerCode'
    },
    {
      title: '产品',
      key: 'k5',
      dataIndex: 'productName'
    },
    {
      title: '产品编号',
      key: 'k6',
      dataIndex: 'productCode'
    },

  ];

  // 产品已收
  const Productget = [{
    dataIndex: 'k1',
    key: 'k1',
    title: '序号',
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    }
  },
    {
      title: '员工部门',
      dataIndex: 'departName',
      key: 'k2',
    },
    {
      title: '员工姓名',
      dataIndex: 'customerName',
      key: 'k3',
    },
    {
      title: '员工编号',
      key: 'k4',
      dataIndex: 'customerCode'
    },
    {
      title: '产品',
      key: 'k5',
      dataIndex: 'productName'
    },
    {
      title: '产品状态',
      key: 'k6',
      dataIndex: 'status',
      customRender: (text) => {
        //字典值替换通用方法
        if (text == 1)
          return "缝制";
        else if (text == 2)
          return "滚烫";
        else if (text == 3)
          return "入库";
      }
    },
    {
      title: '操作',
      dataIndex: 'k7',
      scopedSlots: {
        customRender: 'k7'
      },
    },

  ];

  const column3 = [{
    dataIndex: 'k1',
    key: 'k1',
    title: '序号',
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    }
  },
    {
      title: '员工部门',
      dataIndex: 'departName',
      key: 'k2',
    },
    {
      title: '员工姓名',
      dataIndex: 'customerName',
      key: 'k3',
    },
    {
      title: '员工编号',
      key: 'k4',
      dataIndex: 'customerCode'
    },
    {
      title: '产品',
      key: 'k5',
      dataIndex: 'productName'
    },
    {
      title: '批次信息',
      key: 'k7',
      dataIndex: 'k7',
      scopedSlots: {
        customRender: 'k7'
      },
    },


  ];

  const column4 = [{
    dataIndex: 'k1',
    key: 'k1',
    title: '序号',
  },
    {
      title: '员工部门',
      dataIndex: 'k2',
      key: 'k2',
    },
    {
      title: '员工姓名',
      dataIndex: 'k3',
      key: 'k3',
    },
    {
      title: '员工编号',
      key: 'k4',
      dataIndex: 'k4'
    },
    {
      title: '产品',
      key: 'k5',
      dataIndex: 'k5'
    },
    {
      title: '批次信息',
      key: 'k6',
      dataIndex: 'k6',
      scopedSlots: {
        customRender: 'k6'
      },
    },
  ];

  const data1 = [{
    // k1: '1',
    // k2: '销售部',
    // k3: '支彬',
    // k4: 'ASIO01',
    // k5: '西装上衣',
    // k6: '返修',
    // k7: '查看返修参数'
  }];

  // @ is an alias to /src
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import {getAction} from "../../api/manage";

  export default {
    name: 'MyAfterSales',
    mixins: [JeecgListMixin],
    components: {
      JInput,
    },
    data() {
      return {
        UPDATEPROID: '',// 更新产品状态的ID
        ProductStatus: '', // 选中的产品状态
        visible: false, // 更新产品状态的弹框
        visible2: false, // 查看产品批次的弹框
        batchName: '',  //批次名字
        packingName: '',//装箱名字
        thirdSn: '', //运单号
        remark: '', //备注
        RefustProductList: [], // 被拒绝的人员数据
        AgreeProductList: [], // 同意售后的人员数据
        ReceivingList: [], // 平台收货数据集合
        productGetList: [], // 产品已收人员列表
        BatchDetail: {}, // 批次基本信息
        packageRemark: '', // 保存产品（完成装箱的操作）
        outAfterProList: [], // 售后产品发货列表
        tankuangvisible: false,

        ProPici: '', // 产品批次
        ProBoxName: '',// 装箱单名称
        ProThreadSn: '', // 运单号
        selectPackageid: '', // 本次选中的装箱单ID

        locale,
        Productget,
        data1,
        boxList, // 装箱单表头
        column2,
        column1,
        column3,
        column4,
        datalist: [],
        detail: {
          afterSalesString: "",
          reason: "",
          createTime: ""
        },
        url: {
          getteamafterpeople: "/orderCenter/getAftersmallProduct", // 当前售后订单下的小产品
          agreeAfter: "/orderCenter/agreeAfter", // 同意或拒绝小产品
          listRefustProduct: "/orderCenter/listRefustProduct", // 查询拒绝的产品记录LIST
          listAgreeProduct: "/orderCenter/listAgreeProduct", // 查询同意的产品记录LIST
          receiving: "/orderCenter/receiving", // 平台收货数据列表
          receiptsOrSubmit: "/orderCenter/receiptsOrSubmit", // 发货的确认收货与提交
          listProductget: "/orderCenter/listProductget", // 产品已收人员列表（已收售后小产品列表）
          updateAfterPro: "/orderCenter/updateAfterPro", // 修改产品状态
          getBatchByCode: "/orderCenter/getBatchByCode", // 搜索批次
          addProductonBox: "/orderCenter/addProductonBox", // 添加产品
          saveProInPPackage: "/orderCenter/saveProInPPackage", // 装箱之后的保存操作
          outAfterPro: "/orderCenter/outAfterPro", // 产看售后产品发货列表
          list: "/orderCenter/getAftersmallProduct",
          orderAfterdetail: "/orderAfter/getorderatferdetail",
          Aftertracklist: "/orderAfter/getAftertrack",
          /*fahuo: "/orderAfter/fahuo",
          pici: "/orderAfter/getonetrackafterorderpersonpici"*/
        },
        ipagination1: {
          current: '',
          pageSize: '',
          total: ''
        },
      }
    },
    created() {
      this.getteamafterpeople();
      this.getAftertrack();
      this.getorderatferdetail();
      this.getRefustProductListFunc()
      this.listAgreeProductFunc()
      this.getReceivingListFunc()
      this.listProductgetFunc()
      this.outAfterProFunc()
    },
    methods: {

      test() {
        console.log(this.selectedRowKeys)
      },

      closeModel() {
        this.visible2 = false
      },

      /**
       * 查看批次弹框
       */
      watchBatchFunc(object) {
        this.visible2 = true
        this.ProPici = object.batchName
        this.ProBoxName = object.packingName
        this.ProThreadSn = object.thirdSn
      },

      /**
       * 售后产品发货列表
       */
      outAfterProFunc() {
        getAction(this.url.outAfterPro, {
          'afterCode': this.$route.query.after
        }).then(res => {
          if (res.code == '0') {
            this.outAfterProList = res.data
          }
        })
      },

      /**
       *批次装箱的保存功能（在添加产品之后）
       */
      saveProInPPackageFunc() {
        if (this.packageRemark == '') {
          this.$message.warning("请填写备注信息")
          return
        } else {
          getAction(this.url.saveProInPPackage, {
            'adterCode': this.$route.query.after,
            'remark': this.packageRemark,
            'afterOrderId': this.$route.query.id,
            'packageid': this.selectPackageid
          }).then(res => {
            if (res.code == '0') {
              this.listProductgetFunc()
              this.outAfterProFunc()
              this.$message.success("添加成功")
            } else {
              this.$message.error("暂时没有数据可以保存")
            }
          })
        }
      },

      /**
       * 添加产品到装箱单
       */
      addProductonBox(packageID) {
        if (this.selectedRowKeys == null || this.selectedRowKeys.length < 1) {
          this.$message.warning("请选中产品")
          return
        } else {
          getAction(this.url.addProductonBox, {
            'batchID': this.BatchDetail.id,
            'packageID': packageID,
            'productIDS': this.selectedRowKeys.toString()
          }).then(res => {
            if (res.code == '0') {
              this.selectPackageid = packageID
              this.$message.success('添加成功')
            } else {
              this.$message.error('添加失败')
            }
          })
        }
      },

      /**
       * 搜索批次
       */
      getBatchByCodeFunc() {
        if (this.batchName == '' || this.batchName == null) {
          this.$message.warning("请填写完整批次名称");
          return
        } else {
          getAction(this.url.getBatchByCode, {
            'orderSn': this.$route.query.orderSn,
            'batchName': this.batchName
          }).then(res => {
            if (res.code == '0') {
              this.BatchDetail = res.data
              if (this.BatchDetail == [] || this.BatchDetail == null) {
                this.$message.warning("该批次不存在或已发货，请检查批次名称是否输入正确")
              }
            }
          })
        }
      },

      /**
       * 获取选中售后产品的ID
       */
      getupdateIDfunc(id) {
        this.visible = true
        this.UPDATEPROID = id
      },

      /**
       * 修改产品状态
       */
      updateAfterProFunc() {
        if (this.ProductStatus == '') {
          this.$message.warning("请选择产品状态")
          return
        } else {
          getAction(this.url.updateAfterPro, {
            'id': this.UPDATEPROID,
            'status': this.ProductStatus
          }).then(res => {
            if (res.code == '0') {
              this.listProductgetFunc()
              this.visible = false
              this.$message.success("操作成功")
            } else {
              this.$message.error("操作失败")
            }
          })
        }
      },

      /**
       * 产品已收人员列表
       */
      listProductgetFunc() {
        getAction(this.url.listProductget, {
          'afterCode': this.$route.query.after
        }).then(res => {
          if (res.code == '0') {
            this.productGetList = res.data
          }
        })
      },

      /**
       * 平台收货的确认收货 或 提交
       * @param trackAfterID 选中的售后订单跟踪表ID
       * @param type 0 提交，1 确认收货
       * @param remark2 备注
       */
      receiptsOrSubmitFunc(trackAfterID, type, remark2) {
        if (remark2 == '') {
          this.$success.warning("请输入备注信息")
          return
        } else {
          getAction(this.url.receiptsOrSubmit, {
            'afterCode': this.$route.query.after,
            'afterOrderID': this.$route.query.id,
            'trackAfterID': trackAfterID,
            'type': type,
            'remark': remark2
          }).then(res => {
            if (res.code == '0') {
              this.$message.success('操作成功')
              this.getReceivingListFunc()
              this.listProductgetFunc()
            } else {
              this.$message.error('操作失败')
            }
          })
        }
      },

      /**
       * 平台收货数据
       */
      getReceivingListFunc() {
        getAction(this.url.receiving, {
          'afterOrderID': this.$route.query.id
        }).then(res => {
          if (res.code == '0') {
            this.ReceivingList = res.data
            var array = this.ReceivingList
            for (var i = 0; i < array.length; i++) {
              console.log('我是啊啊啊啊为什么' + array[i].isGet)
            }
          }
        })
      },

      /**
       * 获取同意的人员列表
       */
      listAgreeProductFunc() {
        getAction(this.url.listAgreeProduct, {
          'afterOrderID': this.$route.query.id
        }).then(res => {
          if (res.code == 0) {
            this.AgreeProductList = res.data
          }
        })
      },

      /**
       * 获取被拒绝的人员
       */
      getRefustProductListFunc() {
        getAction(this.url.listRefustProduct, {
          'afterOrderID': this.$route.query.id
        }).then(res => {
          if (res.code == 0) {
            this.RefustProductList = res.data
          }
        })
      },

      /**
       * 小产品的售后或者拒绝
       * @param isAgree 是否同意 0拒绝，1同意
       */
      afterAgreeFunc(isAgree) {
        if (this.selectedRowKeys.length == 0) {
          this.$message.warning("请选择人员")
          return
        } else {
          getAction(this.url.agreeAfter, {
            'afterOrderID': this.$route.query.id, // 售后订单表ID
            'remark': this.remark,                // 备注
            'afterCode': this.$route.query.after, // 售后订单编号
            'isAgree': isAgree,                   // 是否同意 0拒绝，1同意
            'smallProIDS': this.selectedRowKeys.toString() // 选中的小产品ID
          }).then(res => {
            if (res.code == '0') {
              this.getteamafterpeople()
              this.listAgreeProductFunc()
              this.getRefustProductListFunc()
              this.$message.success("操作成功")
            } else {
              this.$message.error("操作失败")
            }
          })
        }
      },

      /*showModal(id) {
        console.log("弹不出来？");
        this.tankuangvisible = true;
        this.getonetrackafterorderpersonpici(id);
      },*/
      handleOk(e) {
        console.log(e);
        this.tankuangvisible = false;
      },


      //查看某个售后小产品的批次信息
      /*getonetrackafterorderpersonpici(id) {
        getAction(this.url.pici, {
          'id': id
        }).then(res => {
          // this.data1 = res.data.data.records
          this.batchName = res.data.batch_name;
          this.packingName = res.data.packing_name;
          this.thirdSn = res.data.third_sn;
        })
      },*/

      //查看批次信息
      /*seepici(id) {
        console.log("哥们行不行？");
      },*/

      selectTab: function (dataStr, i) {
        this[dataStr] = i
      },

      //这里得查询这个团订售后订单中需要进行售后的人员列表（申请售后的小产品）
      getteamafterpeople() {
        getAction(this.url.getteamafterpeople, {
          'afterCode': this.$route.query.after
        }).then(res => {
          this.data1 = res.result.records
          this.ipagination1.current = res.result.current
          this.ipagination1.pageSize = res.result.size
          this.ipagination1.total = res.result.total
        })
      },

      // 分页器方法
      handleTableChange2(page, pageSize) {
        getAction(this.url.getteamafterpeople, {
          'pageNo': page.current,
          'pageSize': page.current.pageSize,
          'orderafterId': this.$route.query.id
        }).then(res => {
          if (res.code == '0') {
            this.data1 = res.result.records
            this.ipagination1.current = res.result.current
            this.ipagination1.pageSize = res.result.size
            this.ipagination1.total = res.result.total
          }
        })
      },

      //跳转去 团订售后的人员列表的详情
      /*getteamAfterpeopleDetail(id, afterCode) {
        this.$router.push({
          path: '/orderCenter/teamAfteronepersonDetail',
          query: {afterCode: afterCode, customerId: id}
        })
      },*/

      /*fahuo(item) {
        getAction(this.url.fahuo, {
          'courierName': this.courierName,
          'courierNumber': this.courierNumber,
          'aftertrackId': item.id,
          'afterId': this.$route.query.id,
          'ordertype': this.ordertype
        }).then(res => {
          this.getAftertrack();
        })
      },*/
      //查询该条售后的详情
      getorderatferdetail() {
        getAction(this.url.orderAfterdetail, {
          'id': this.$route.query.id
        }).then(res => {
          this.detail.afterSalesString = res.data.afterSalesString;
          this.detail.createTime = res.data.createTime;
          this.detail.reason = res.data.reason;
        })
      },
      //查询该条售后订单的跟踪记录
      getAftertrack() {
        getAction(this.url.Aftertracklist, {
          'id': this.$route.query.id
        }).then(res => {
          this.datalist = res.data;
        })
      },
    }
  }
</script>

<style scoped lang="less">
  .content-box {
    background-color: #fff;
  }

  .roder-details {
    width: 80%;
    margin: 0 auto;
    background: #fff;
    padding: 0px 35px;

    .info {
      padding-top: 30px;
      padding-left: 26px;
      position: relative;
      min-height: 800px;

      .inputes {
        margin-bottom: 20px;
        display: flex;

        & > input {
          margin-right: 10px;
          width: 173px;
          height: 34px;
          padding: 3px 2px 3px 2px;
          font-family: 'ArialMT', 'Arial';
          font-weight: 400;
          font-style: normal;
          font-size: 13px;
          text-decoration: none;
          letter-spacing: normal;
          color: #000000;
          vertical-align: none;
          text-align: left;
          text-transform: none;
          background-color: transparent;
          border: 1px solid rgba(220, 223, 230, 1);
          padding-left: 4px;
        }
      }

      .fh {
        width: 82px;
        height: 36px;
        background-color: rgba(81, 81, 81, 1);
        border-radius: 3px;
        display: block;
        line-height: 36px;
        text-align: center;
        color: rgb(236, 227, 0);
      }

      .imgs {
        display: flex;
        margin-bottom: 20px;

        img {
          width: 88px;
          height: 88px;
          margin-right: 10px;
        }
      }


      .text11 {
        display: flex;
        margin-bottom: 20px;

        & > p {
          width: 100px;
          font-weight: 100;
          font-size: 14px;
          color: #333;

        }

        & > div {
          & > h5 {
            color: #333;
            font-size: 15px;
            font-weight: 500;

            display: block;
          }

          & > p {
            color: #333;
            font-size: 15px;
            font-weight: 100;

            display: block;
          }
        }
      }

      .title10 {
        color: #333;
        font-weight: 700;
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 20px;
      }

      .text10 {
        display: flex;
        margin-bottom: 20px;

        & > p {
          width: 100px;
          font-weight: 100;
          font-size: 14px;
          color: #333;

        }

        div {
          span {
            color: #333;
            font-size: 15px;
            font-weight: 100;

            &.b {
              font-weight: 500;
            }

            display: block;
          }
        }
      }

      .table-css {
        position: relative;

        .bz {
          width: 447px;
          height: 63px;
          background: inherit;
          background-color: rgba(255, 221, 202, 1);
          position: absolute;
          right: 0px;
          top: -63px;
          display: flex;
          align-items: center;
          justify-content: center;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          flex-direction: column;

          p {
            width: 100%;
            color: rgb(251, 8, 8);
            font-size: 13px;
            padding-left: 10px;
            margin-bottom: 0px;
            line-height: 16px;
          }
        }
      }

      .btns {
        margin-top: 25px;
        margin-bottom: 60px;
        display: flex;

        .btn1 {

          border-width: 0px;
          width: 105px;
          height: 42px;
          background: inherit;
          background-color: rgba(81, 81, 81, 1);
          border: none;
          border-radius: 3px;
          -moz-box-shadow: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
          font-weight: 500;
          font-style: normal;
          font-size: 13px;
          text-align: center;
          display: block;
          color: rgb(236, 227, 0);
          line-height: 40px;
          margin-right: 20px;
          cursor: pointer;
        }

        .btn2 {

          border-width: 0px;
          width: 105px;
          height: 42px;
          background: inherit;
          background-color: rgba(244, 244, 244, 1);
          border: none;
          border-radius: 3px;
          -moz-box-shadow: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
          font-weight: 500;
          font-style: normal;
          font-size: 13px;
          text-align: center;
          display: block;
          color: rgb(104, 104, 104);
          line-height: 40px;
          margin-right: 20px;
          cursor: pointer;
        }
      }


      .price {
        color: rgb(38, 38, 38);
        font-size: 16px;

        span {
          color: rgb(215, 1, 1);
        }

        margin: 35px 0px;
      }

      .text1 {
        width: 533px;
        height: 105px;
        padding: 3px 2px 3px 2px;
        font-family: 'ArialMT', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        text-decoration: none;
        letter-spacing: normal;
        color: #000000;
        vertical-align: none;
        text-align: left;
        text-transform: none;
        background-color: #f9f9f9;
        border-color: transparent;
        resize: none;
        outline: none;
        padding: 10px;
      }

      .tabs {
        .tab {
          margin-bottom: 10px;
          display: flex;

          h5 {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
            margin-right: 6px !important;
          }

          .tab-content {
            height: 36px;
            display: flex;

            p {
              border: 1px solid rgb(242, 242, 242);
              min-width: 100px;
              height: 36px;
              height: 36px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 0 15px;
              color: #333;
              font-size: 15px;
              margin-right: 6px;

              cursor: pointer;

              b {
                display: none;
                font-weight: 700;
              }

              &.active {
                color: rgb(255, 236, 112);
                font-weight: 700;
                background-color: rgb(74, 74, 74);
              }

              &:hover {
                b {
                  display: block;
                }

                span {
                  display: none;
                }
              }
            }
          }
        }
      }

      h3.title {
        height: 30px;
        line-height: 30px;
        position: relative;
        font-size: 16px;
        color: #333;
        font-weight: 700;
        margin-bottom: 25px;

        &:after {
          position: absolute;
          height: 100%;
          width: 5px;
          position: absolute;
          left: -25px;
          top: 0px;
          background-color: rgba(74, 74, 74, 1);
          content: "";
        }
      }

      .title2 {
        width: 112px;
        padding: 2px 2px 2px 24px;
        font-size: 15px;
        color: #333;
        display: flex;
        height: 36px;
        align-items: center;
        margin: 0px !important;
        margin-bottom: 10px !important;
      }

      .list {
        margin-bottom: 20px;

        .list-div {
          display: flex;
          flex-wrap: wrap;

          div {
            width: 33.3%;
            display: flex;
            height: 36px;
            align-items: center;

            p {
              width: 112px;
              padding: 2px 2px 2px 24px;
              background-color: rgba(249, 249, 249, 1);
              font-size: 15px;
              color: #333;
              display: flex;
              height: 36px;
              align-items: center;
              margin: 0px !important;
            }

            span {
              width: calc(100% - 112px);
              padding: 2px 2px 2px 24px;
              font-size: 15px;
              color: #333;
              display: flex;
              height: 36px;
              align-items: center;

              &.b {
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
</style>